import React from 'react';
import { Route, Switch, } from 'react-router-dom';
import { RouteLayout } from 'weaver-mobile-page';
import { List, Tools } from 'weaver-mobile';
import { withRouter } from 'react-router-dom';

import OneWeekWorkplan from '../oneWeekWorkplan/index';
import WorkplanViewList from '../workplanViewList/index';
let getLabel = Tools.getLabel
@withRouter
class Report extends React.Component {
  constructor(props) {
    super(props)
  }
  componentDidMount() {
    let pathName = this.props.location.pathname
    if(pathName=="/calendar/myCalendar/report"||pathName=="/calendar/allCalendar/report"){
      window.em && window.em.checkJsApi('changeTitle') && window.em.changeTitle({ title: getLabel(15101,'报表') })
    }
  }

  componentWillReceiveProps(nextProps){
    let prePathName = this.props.location.pathname
    let curPathName = nextProps.location.pathname
    if(curPathName&&curPathName!==prePathName){
      if(curPathName=="/calendar/myCalendar/report"||curPathName=="/calendar/allCalendar/report"){
        window.em && window.em.checkJsApi('changeTitle') && window.em.changeTitle({ title: getLabel(15101,'报表') })
      }
    }
  }

  render() {
    const reportList = this.props.reportList || [];
    const { location: { pathname } } = this.props.history;
    return (<div style={{ height: '100%' }}>
      <List style={{ borderBottom: '1px solid #ddd' }}>
        {Array.isArray(reportList) && reportList.map((res, index) => (
          <List.Item arrow='horizontal' key={index} onClick={() => this.props.history.push(pathname + '/' + res.key)}>{res.name}</List.Item>
        ))}
      </List>
      <Switch>
        <Route
          key="oneWeekWorkplan"
          path="**/oneWeekWorkplan" // 匹配： .../oneWeekWorkplan  格式的路由地址
          render={() => (
            <RouteLayout>
              <div key="calendarDetail" className="wm-route-layout wm-demo-route-layout-page" style={{ height: 'calc(100% - 50px)' }}>
                <OneWeekWorkplan />
              </div>
            </RouteLayout>
          )}
        />
        <Route
          key="workPlanViewList"
          path="**/workPlanViewList"
          render={() => (
            <RouteLayout>
              <div key="calendarDetail" className="wm-route-layout wm-demo-route-layout-page" style={{ height: 'calc(100% - 50px)' }}>
                <WorkplanViewList />
              </div>
            </RouteLayout>
          )}
        />
      </Switch>
    </div>);
  }

}

export default Report;